// 租车指南页面
<template>
  <div class="wrapper">
    <!-- 顶部tarBar栏 -->
    <van-nav-bar
      class="tab-bar animate__fadeInDown animate__animated"
      title="租车指南"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      border
    />
    <div class="box">
      <!-- 轮播图组件 -->
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :show-indicators="show"
      >
        <van-swipe-item v-for="item in data" :key="item.title">
          <show-step :data="item" >item.title</show-step>
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图组件 -->
      <Ljzcbtn class="Ljzcbtn"/>
    </div>
  </div>
</template>

<script>
import ShowStep from "./components/ShowStep.vue"
import Ljzcbtn from '../../components/common/Ljzcbtn.vue'
export default {
  name: "CarGuide",
  components: {ShowStep, Ljzcbtn},
  data() {
    return {
      show: false, // 不显示轮播图的指示器
      // 数据
      data: [
        {
          title: '注册登录',
          content: '使用支付宝账号快捷登录或使用手机号完成注册/登录。',
          img: 'https://static.wkzuche.com/H5/images/h5/aliLite/1.jpg'
        },
        {
          title: '实名认证',
          content: '输入真实姓名和身份证号即可完成认证，实名信息加密处理，不会泄露您的任何隐私。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/2.jpg"
        },
        {
          title: '首页选车',
          content: '在首页，依次选择取车城市、取车地点，取车时间、还车时间，点击【立即选车】即可看到多种车型。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/3.jpg"
        },
        {
          title: '选择车辆',
          content: '您可以比较价格、距离、服务、评价，从多维度选择符合心意的车辆，并进行预订。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/4.jpg"
        },
        {
          title: '确认订单信息',
          content: '您离用车只差一步了，完成支付开启租车之旅。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/5.jpg"
        },
        {
          title: '取车',
          content: '携带取车人的二代身份证，距初次领证日期大于半年且在有效期内的驾驶证。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/6.jpg"
        },
        {
          title: '用车中',
          content: '在您用车过程中有任何问题可以联系门店或400-0515-507，如需更改还车时间，您可以在订单详情点击【提前还车】或【续租】按钮，根据提示完成操作。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/7.jpg"
        },
        {
          title: '还车',
          content: '请按照还车时间到指定地点办理还车，已享受芝麻信用免押金的订单无需支付违章押金。未免押的订单需在还车前情在线支付违章押金。违章押金会在还车结算后30天解冻或退还。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/8.jpg"
        },
        {
          title: '完成',
          content: '感谢您选择悟空租车，期待您的下次旅行。',
          img: "https://static.wkzuche.com/H5/images/h5/aliLite/9.jpg"
        },
      ],
    };
  },
  methods: {
    // 点击顶部tarBar的返回
    onClickLeft() {
      this.$router.go(-1)
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.wrapper {
  .box {
    margin-top: 46px;
  }
  .tab-bar {
    .van-nav-bar__title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .Ljzcbtn {
    .van-button {
      margin: 30px auto 0;
    }
  }
}
</style>